@charset "utf-8";
@import "common";
@import "reset";


body{
    width: 100%;
}
section{
    width: 1366px;
    margin: 0 auto;
    padding-bottom: 44px;
}

.nav{
    margin-top: 24px;
    margin-left: 182px;
    height: 12px;
    font-size: 12px;
    color: $fontcolor;
    margin-bottom: 23px;
    
}

//广告
.ad{
    border-top: 1px solid $basecolor;
    position: relative;
    p{
        position: absolute;
        top: 220px;
        background-color: #e60012;
        text-align: center;
//      color: white;
        width: 58px;
        height: 26px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 26px;
        a{
            color: white;
        }
        &:first-of-type{
            right: 295px;
        }
        &:nth-of-type(2){
            right: 224px;
        }
    }
}

//主要部分
.main{
    width: 960px;
//  height: 1021px;
    margin: 10px auto 0 auto;
//  background-color: black;
    .topbar{
        width: 100%;
        //分类
        .classification{
            width: 138px;
            height: 52px;
            border: 1px solid $basecolor;
            text-align: center;
            line-height: 52px;
            font-size: 14px;
            cursor:pointer; 
            img{
                width: 11px;
                height: 6px;
                vertical-align: middle;
            }
        }
//      信息栏
        .inforbar{
            border-top: 1px solid $basecolor;
            border-bottom: 1px solid $basecolor;
            border-right: 1px solid $basecolor;
            width: 774px;
            height: 52px;
            line-height: 52px;
            padding-left: 23px;
            padding-right: 22px;
            .goods{
                float: right;
                display: inline-block;
                font-size: 14px;
                color: #a9a9a9;
                .sp{
                    color: $fontcolor;
                }
                .num{
                    color: red;
                }
            }
        }
    }
//  衣服
    .clothes{
        width: 100%;
        margin-top: 12px;
//      衣服板块
        .clothescell{
            width: 232px;
            position: relative;
            height: 282px;
            margin-right: 10px;
            margin-top: 52px;
            transition: all 0.5s;
            &:hover{
//              @include boxshadow;
                z-index: 99;
                transition: all 0.5s;
            }
            &:hover .img-w>img{
                transform: scale(1.2);
                transition: transform 0.5s;
            }
            &:hover .cellbottom{
                height: 97px;
//              box-shadow: 0px 3px 3px black;
                transition: height 0.5s;
            }
            &:nth-of-type(4n){
                margin-right: 0;
            }
            &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4){
                margin-top: 0;
            }
            .img-w{
                border: 1px solid $basecolor;
                overflow: hidden;
                img{
                    width: 230px;
                    height: 230px;
                    transform: scale(1);
                    transition: transform 0.5s;
                }

            }
            //          底部
                .cellbottom{
                    width: 100%;
                    height: 50px;
                    overflow: hidden;
                    position: absolute;
                    top: 232px;
//                  left: 1px;
//                  background-color: white;
                    transition: height 0.5s;
                    p:first-of-type{
                        height: 14px;
                        width: 100%;
                        margin-top: 12px;
                        color: $fontcolor;
                    }
                    p:nth-of-type(2){
                        height:12px;
                        font-size:12px;
                        margin-top:10px;
                        color: #99999a;
                    }
                    p:nth-of-type(3){
                        height: 20px;
                        margin-top: 17px;
                        width: 100%;
                        font-size: 0;
                        text-align: right;
                        span{
                            display: inline-block;
                            width: 70px;
                            color: white;
                            background-color: black;
                            border-radius: 10px;
                            font-size: 11px;
                            line-height: 20px;
                            text-align: center;
                            margin-right: 9px;
                            
                        }
                        
                        
                    }
                }
            
            
        }
    }
    
    
    
    
}
//主要部分结束

.tiaozhuan{
    width: 960px;
//  height: 38px;
//  background-color: black;
    margin:40px auto 0 auto;
    font-size: 0;

    .tiaozhuanbar{
        display: inline-block;
        height: 38px;
        line-height: 36px;
        .numberwarp{
            width: 36px;
            height: 36px;
            border: 1px solid $basecolor;
            font-size: 10px;
            line-height: 36px;
            border-radius: 3px;
            text-align: center;
            color: $fontcolor;
            margin-left: 9px;
            cursor:pointer; 
            a{
                width: 100%;
                height: 100%;
                display: block;
            }
            &:first-of-type{
                margin-left: 0;
            }
            
            
        }
        .active{
            border: 1px solid red;
            color: red;
        }
        .no{
            border: 1px solid white;
            
        }
//      更多内容
        .morewarp{
            width: 66px;
            height: 36px;
            border: 1px solid $basecolor;
            font-size: 10px;
            line-height: 36px;
            border-radius: 3px;
            text-align: center;
            color: $fontcolor;
            margin-left: 9px;
            cursor:pointer; 
        }
    }
}

